import {
  StyleSheet,
  TextInput,
  View,
  Text,
} from 'react-native';
import {useContext, useState} from 'react';
import {ThemeContext} from '../../../components/ThemeContextProvider';
import CommonModal from '../../../components/CommonModal';
import Keyboard from '../../../components/Keyboard'
import toastShow from '../../../utils/toastShow'
export default function OutModal({show, setShow, onOk, editInfo = {goods_info:{}, user_info:'', qty: '', id: '', }}) {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    head: {
        flexDirection: 'row',
        marginTop: 10
    },
    goodsName: {
        fontSize: 14
    },
    phone: {
        fontSize: 14,
        marginLeft: 6
    },
    iptWrap: {
        width: '100%',
        height: 50,
        borderWidth: 1,
        borderColor: theme.dividerColor,
        borderRadius: 12,
        paddingHorizontal: 12,
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 10
    },
    input: {
        fontSize: 14,
        flex: 1,
        height: 50
    },
    number: {
        fontSize: 12,
        marginLeft: 10
    }
  });
  const [number, setNumber] = useState('')
  return <CommonModal show={show} setShow={setShow} title="寄存取出" width={460}>
    <View style={styles.head}>
        <Text style={styles.goodsName}>{editInfo.goods_info.name}</Text>
        <Text style={styles.phone}>{editInfo.user_info.phone}</Text>
    </View>
    <View style={styles.iptWrap}>
        <TextInput placeholder='请输入取出的数量' style={styles.input}
        value={number} onChangeText={setNumber}></TextInput>
        <Text style={styles.number}>剩余{editInfo.qty}件</Text>
    </View>
    <Keyboard number={number} setNumber={setNumber} onOk={()=>{
        if(!number || number<1){
            toastShow('请输入数量')
            return;
        }
        onOk({qty:number, store_save_id: editInfo.id})
    }}></Keyboard>
  </CommonModal>;
}
